<template>
    <div>
        <!-- <header class="flex justify-between align-center">
            <ul id="standardTypes" class="standardTypesBlock flex">
                <li :class="{'active':standardTypeIndex===0}" @click="standardTypeIndex=0">全部</li>
                <li v-for="(item,index) in standardTypesArr" :class="{'active':standardTypeIndex===index+1}" @click="standardTypeIndex=index+1" :key="item.id">{{item.name}}</li>
            </ul>
            <el-button type="primary" icon="el-icon-plus" size='small' round  @click="$router.push('/addStand')">创建规范</el-button>
        </header> -->
        <nav class="BreadcrumbBlock">
			<div class="flex">
				<div class="BreadItem" @click="$router.push('/myStand')">我的</div>
				<div class="BreadItem active">我的规范</div>
			</div>
		</nav>
        
        <article class="standardData flex flex-wrap">
            <section class="standardItem" v-for="(item,index) in standardData" :key="item.id" @click="goto(item)">
                <div v-if="item.status==0" class="fbImg">
                    <img :src="require('@/assets/images/front/anglemark.png')" alt="">
                </div>
                <div class="standardItemImg">
                    <img :src="item.covar_path" alt="">
                </div>
                <div class="standardItemDesc">
                    <p class="standardName">{{item.name}}</p>
                    <time class="standardUpdateTime">{{item.update_time}} 更新</time>
                </div>
                <div class="standHover flex justify-end" v-show="!isEditOrder"  @mouseleave="item.isHoverH=false">
                    <div @mouseover="item.isHoverH=true">
                        <i class="el-icon-more"></i>
                    </div>
                    
                    <ul class="standHoverHandleBox" v-show="item.isHoverH">
                        <li @click="goto(item)">编辑</li>
                        <li @click.stop="delStand(item.id,index)">删除</li>
                    </ul>
                </div>
            </section>
        </article>


        <el-dialog title="" :visible.sync="dialogDelVisible" width='536px'>
            <div class="dialog_title relative flex align-center justify-between">
                <div class="">是否彻底删除此规范吗？</div>
                <!-- <i class="el-icon-close pointer" @click="dialogDesignVisible=false"></i> -->
            </div>
            <p class="del_text">
                规范删除后，信息不可恢复<br/>
            </p>
            <div slot="footer" class="dialog-footer">

                <button class="custom_primary_btn" @click="delApi()">删除</button>
                <button class="custom_info_btn" @click="dialogDelVisible = false">取消</button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import {formatData} from '@/utils/index.js'
export default{
    name: 'myStand',
    data(){
        return {
            standardData:[],
            dialogDelVisible:false,//删除flag
            delId:'',//删除id
        }
    },
    mounted(){
        this.getData()
    },
    methods:{
        getData(){
            let that = this;
            this.$axios.get('/api/standard/list',{
                params:{
                    user_id:that.$store.state.userInfo.user_id
                }
            }).then((res)=>{
                that.standardData = [];
                if(res.data.data && res.data.data.length>0){
                    res.data.data.forEach(element => {
                        element.update_time = formatData(element.update_time);
                        element.isHoverH = false;
                    });
                    that.standardData = res.data.data
                }
            })
        },
        goto(item){
            this.$router.push({
                path:'/standDetail',
                query:{
                    id:item.id
                }
            })
            
        },
        delStand(id,index){    //删除规范
            let that = this;
            this.delId = id;
            this.dialogDelVisible = true;
        },
        delApi(){
            let that = this;
            this.dialogDelVisible = false;
            this.$axios.post('/api/standard/delete',{id:that.delId}).then((res)=>{
                that.getData();
                that.category_id = '';
                this.$message({
                    type: 'success',
                    message: res.data.message
                });
            })
        },
    }
}
</script>
<style scoped lang='less'>


    /deep/ .el-dialog{
        padding: 28px !important;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0 auto 50px !important;
    }
    /deep/ .el-dialog__header{
        display: none !important;
    }
    /deep/ .el-dialog__body{
        padding: 0 !important;
        .el-select{
            width: 100% !important;
        }
    }
    .dialog_title{
        font-size: 20px;
        color: #000000;
        letter-spacing: 0;
        line-height: 16px;
        opacity: 0.95;
        font-weight: 500;
        margin-bottom: 20px;
        i{
        color: #E3E3E3;
        }
    }
    .del_text{
        margin-top: 18px;
        font-size: 16px;
        color: #000000;
        opacity: .5;
        letter-spacing: 0;
        line-height: 28px;
        font-weight: 400;
    }
    /deep/ .el-dialog__footer{
        padding: 0;
        margin-top: 20px;
        .custom_primary_btn,.custom_info_btn{
            min-width: 83px;
        }
    }


    .standardItem{
        width: 322px;
        height: 322px;
        background: #FFFFFF;
        box-shadow: 0 0 18px 0 rgba(0,0,0,0.10);
        border-radius: 10px;
        margin: 18px 34px 18px 0;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        .standHover{
            right: 16px;
            top: 16px;
            position: absolute;
            display: none;
            width: 110px;
            height: 120px;
            div{
                position: absolute;
                right: 0;
                width: 42px;
                height: 26px;
                line-height: 26px;
                background: rgba(0,0,0,0.30);
                border-radius: 6px;
                color: #fff;
                text-align: center;
                box-sizing: border-box;
                i{
                    font-size: 25px;
                }
            }
            
            // padding: 35% 0;
            
            div:hover + .standHoverHandleBox{
                display: block;
            }
            .standHoverHandleBox{
                position: absolute;
                right: 0;
                top: 36px;
                width:109px;
                height: 77px;
                background: #FFFFFF;
                box-shadow: 0 0 10px 0 rgba(0,0,0,0.10);
                font-size: 16px;
                color: #000000;
                border-radius: 5px;
                overflow: hidden;
                text-align: center;
                li{
                    height: 38px;
                    line-height: 38px;
                    cursor: pointer;
                }
                li:hover{
                    background: #F4F5F8;
                }
            }
        }
    }
    .standardItem:hover .standHover{
        display: block;
    }
    .fbImg{
        position: absolute;
        top: 0;
        left: 0;
    }
    .standardItemImg{
        width: 100%;
        height: calc(100% - 80px);
        display: flex;
        justify-content: center;
        align-items: center;
		img{
		    max-width: 100%;
		    max-height: 100%;
		}
    }
    .standardItemDesc{
        box-sizing: border-box;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80px;
        padding: 18px;
        padding-left: 28px;
        background: #FBFBFC;
        border-radius: 0 0 9.17px 9.17px;
		.standardName{
		    font-size: 16px;
		    color: #000000;
		    letter-spacing: 0;
		    line-height: 22px;
		    opacity: 0.95;
		}
		.standardUpdateTime{
		    font-size: 12px;
		    color: rgba(0,0,0,0.30);
		    letter-spacing: 0;
		    line-height: 16.5px;
		}
    }
</style>
